<script setup lang="ts">
//@ts-ignore
import logo from '../assets/logo.png'
import { type Ref, ref, watch, watchEffect } from 'vue'
import { RouterView } from 'vue-router'
import { useGlobalStore } from '@/stores/global'
import { toggleTheme } from '@/tools/theme'
import router from '@/router'
import { applicationCache, logout } from '@/api/system/commons/comons'
import { Message } from '@arco-design/web-vue'
import type { Result } from '@/tools/request'
import MenuRecurionComponent from '@/components/MenuRecurionComponent.vue'

const collapsed: Ref<boolean> = ref(false)
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}

const globalStore = useGlobalStore()
//@ts-ignore
const getGlobalCache = () => applicationCache().then((resp: Result<any>) => {
  globalStore.setCache(resp.data)
  Message.success('刷新全局缓存成功！')
  console.log(globalStore.cache)
})
getGlobalCache()

const logoutFun = () => {
  router.push('/login')
}

watchEffect(() => {
  toggleTheme(globalStore.theme)
})
</script>

<template>
  <a-layout class="layout-container h-100">
    <a-layout-header class="layout-header layout-navbar d-flex align-items-center justify-content-between p-4">
      <div class="d-flex align-items-center">
        <div class="me-2">
          <img :src="logo" class="logo" @click="toggleCollapsed" />
        </div>
        <span class="fs-4 fw-bold websiteName">Rocc.ink</span>
      </div>
      <div class="d-flex align-items-center me-4">
        <a-tooltip content="全局缓存" position="bottom">
          <a-button shape="circle" size="large" class="me-4 a-header-btn" type="outline" @click="getGlobalCache">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>

        <a-tooltip content="主题" position="bottom">
          <a-button @click="globalStore.changeTheme" shape="circle" size="large" class="me-4 a-header-btn"
                    type="outline">
            <template #icon>
              <icon-sun v-if="globalStore.theme" />
              <icon-moon v-else />
            </template>
          </a-button>
        </a-tooltip>
        <a-tooltip content="设置" position="bottom">
          <a-button shape="circle" size="large" class="me-4 a-header-btn" type="outline">
            <template #icon>
              <icon-settings />
            </template>
          </a-button>
        </a-tooltip>

        <a-dropdown trigger="hover">
          <a-avatar :size="40" :image-url="logo"></a-avatar>
          <template #content>
            <a-doption>
              <template #icon>
                <icon-user />
              </template>
              我的账户
            </a-doption>
            <a-doption @click="logoutFun">
              <template #icon>
                <icon-export />
              </template>
              退出登录
            </a-doption>
          </template>
        </a-dropdown>
      </div>
    </a-layout-header>
    <a-layout>

      <a-layout-sider :collapsed="collapsed" class="flex-row">
        <a-menu
          class="h-100 menu"
          :collapsed="collapsed"
        >
          <a-menu-item>
            <template #icon>
              <icon-home></icon-home>
            </template>
            主页
          </a-menu-item>
          <MenuRecurionComponent :menu="v" :key="i" v-for="(v,i) in globalStore.menus" />
        </a-menu>
      </a-layout-sider>
      <a-layout class="p-3">
        <RouterView />
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<style scoped lang="scss">
.layout-container {

  :deep(.arco-layout-header) {
    background-color: var(--color-bg-2);
  }

  :deep(.arco-layout) {
    background-color: var(--color-bg-3);
  }


  .layout-header {
    height: 70px;
    border-bottom: solid 1px var(--color-border);

    :deep(.websiteName) {
      color: var(--color-text-1);
    }

    .logo {
      width: 45px;
      border-radius: 6px;
      vertical-align: middle;
    }

    .a-header-btn {
      border-color: var(--color-border);
      color: var(--gray-2);


    }

    :deep(.a-header-btn) {
      color: var(--color-text-1);
    }
  }


}
</style>
